<template>
  <div class="dataBase">
    <ContentWrap>
      <el-form label-width="100px" ref="formRef" :model="searchValue">
        <el-row>
          <el-col :span="6">
            <el-form-item label="字段名称" prop="column">
              <ns-input v-model="searchValue.column" clearable placeholder="请输入表名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="字段描述" prop="comment">
              <ns-input v-model="searchValue.comment" clearable placeholder="请输入表描述" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属库" prop="database">
              <ns-input v-model="searchValue.database" clearable placeholder="请输入所属库" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属表" prop="table">
              <ns-input v-model="searchValue.table" clearable placeholder="请输入所属表" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="分级变更" prop="levelChange">
              <el-select v-model="searchValue.levelChange" clearable placeholder="请选择分级变更">
                <el-option label="有变更" value="1" key="1" />
                <el-option label="无变更" value="2" key="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="分类变更" prop="classificationChange	">
              <el-select
                v-model="searchValue.classificationChange"
                clearable
                placeholder="请选择分类变更"
              >
                <el-option label="有变更" value="1" key="1" />
                <el-option label="无变更" value="2" key="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="重要程度变更" prop="importanceChange">
              <el-select
                v-model="searchValue.importanceChange"
                clearable
                placeholder="请选择重要程度变更"
              >
                <el-option label="有变更" value="1" key="1" />
                <el-option label="无变更" value="2" key="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="text-right">
            <el-button @click="searchReset" plain>重置</el-button>
            <el-button @click="search" plain>搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
    </ContentWrap>
    <ContentWrap>
      <AsyncTable v-bind="tableInfo" ref="tableRef" :fetchData="fetchData" />
    </ContentWrap>
  </div>
</template>

<script setup lang="tsx">
import AsyncTable from '@/components/AsyncTable'
import { levelHistorySelectMerge } from '@/api/levelHistory/index'
import {
  classificationChangeRender,
  levelChangeRender,
  importanceChangeRender
} from '@/utils/commonRender'
const props = defineProps({
  params: {
    type: Object,
    default: () => {}
  }
})
const tableRef = ref()
const formRef = ref()

const searchReset = () => {
  formRef.value.resetFields()
  tableRef.value.resetPage()
  tableRef.value.fetchData()
}
const searchValue = ref({
  column: '',
  table: '',
  comment: '',
  database: '',
  levelChange: '',
  classificationChange: '',
  importanceChange: ''
})

const search = () => {
  tableRef.value.resetPage()
  tableRef.value.fetchData()
}
const tableInfo = reactive({
  columns: [
    { label: '字段名称', prop: 'column' },
    { label: '字段描述', prop: 'comment' },
    { label: '所属库', prop: 'database' },
    { label: '所属表', prop: 'table' },
    { label: '分级变更情况', render: levelChangeRender },
    { label: '分类变更情况', render: classificationChangeRender },
    { label: '重要程度变更情况', render: importanceChangeRender },
    { width: '80px' }
  ],
  data: []
})

const fetchData = async ({ page, pageSize }) => {
  const { data, count } = await levelHistorySelectMerge({
    page,
    pageSize,
    dataType: 'column',
    firstId: props.params.firstId,
    nextId: props.params.nextId,
    ...searchValue.value
  })
  return { data, count }
}

onMounted(() => {})
</script>

<style lang="scss">
.dataBase {
  .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: inline-flex;
    align-items: center;
    line-height: 23px;
    padding-left: 12px;
  }
  .el-form .el-select {
    width: 100%;
  }
  :deep(.hide-expand .cell) {
    display: none;
  }
  :deep(.el-form .el-cascader) {
    width: 100%;
  }
  :deep(.operate-btn .el-button.is-text) {
    padding: 0 10px 0 0;
  }
  .el-dropdown-link:focus {
    outline: none;
  }
}
</style>
